import React from 'react';
import {Modal,Form,Input,Select,Radio,InputNumber } from 'antd';
import {connect} from 'dva';
const  FormItem=Form.Item;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};


class AddCustomerModalUI extends React.Component {

  handleOk = () => {
      this.props.form.validateFieldsAndScroll((errors, values) => {
        if (errors) {

        } else {
          this.props.dispatch({
            type: 'customer/e_add',
            payload:values
          });
          this.props.form.resetFields();
          this.props.showOrHiddenModalVisible(false);
        }
      });
  };

  handleCancel = () => {
    this.props.form.resetFields();
    this.props.showOrHiddenModalVisible(false);
  };

  render() {
    const customerTypes = this.props.customerTypes.map(customerType => <Select.Option key={customerType.id}>{customerType.name}</Select.Option>);
    return(
      <Modal title="添加顾客" visible={true} onOk={()=>{this.handleOk()}}
             onCancel={()=>{this.handleCancel()}} okText="确认" cancelText="取消" maskClosable={false}
      >
        <Form>
          <FormItem {...formItemLayout}  label="姓名" >
            {
              this.props.form.getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message:'姓名不能为空',
                  },
                ],
              })(<Input  placeholder="姓名" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="性别" labelCol={{span: 4}} wrapperCol={{span: 16}}>
            {
              this.props.form.getFieldDecorator('gender', {
                rules: [
                  {
                    required: true,
                    message:'请选择性别',
                  },
                ],
              })(
                < Radio.Group>
                  <Radio value="Male">男</Radio>
                  <Radio value="Female">女</Radio>
                </ Radio.Group>
              )
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="手机" >
            {
              this.props.form.getFieldDecorator('cellphone', {rules: [{required: true, message:"请输入手机号",
                type: "string",
                pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$" },],
              })(<Input  placeholder="用户名" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="会员卡号" >
            {
              this.props.form.getFieldDecorator('customerNo')(<Input  placeholder="会员卡号" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="会员类型" labelCol={{span: 4}} wrapperCol={{span: 16}}>
            {
              this.props.form.getFieldDecorator('typeId', {
                rules: [{required: true,
                  message:'请选择会员类型',
                }],
              })(
                <Select style={{width: 325}}>
                  {customerTypes}
                </Select>
              )
            }
          </FormItem>
         {/* <FormItem {...formItemLayout}  label="余额" >
            {
              this.props.form.getFieldDecorator('amount', {
                rules: [{required: true, message:"余额范围[0.01-100000.00]",
                  type: "number",
                  min:0.01,
                  max:100000.00,
                },],
              })(<InputNumber  placeholder="余额" style={{width:'325px'}} size="large" precision={2} step={50}/>)
            }
          </FormItem>*/}
        </Form>
      </Modal>

    );
  }
}

export default connect()(Form.create()(AddCustomerModalUI));
